<!--这个文件的组件叫做单文件组件，也就是 .vue文件里面包含了一个组件中的所有内容-->

<!--模板部分-->
<template>
  <div>
  <div>
    <!--给父组件添加全局样式-->
    <input class="item" v-model="inputValue"/>
    <button @click = "handleSubmit">提交</button>
  </div>
  <ul>
    <!--父组件通过属性的方式向子组件传值，把每一项的内容通过content传给子组件-->
    <!--父组件通过@delete监听子组件触发的事件,一旦触发，执行handleDelete方法-->
    <todo-item
    v-for="(item,index) of list"
    :key="index"
    :content="item"
    :index="index"
    @delete="handleDelete"
    ></todo-item>
  </ul>
  </div>
</template>

<!--逻辑部分-->
<script>
  //引入componets中的todoItem组件，此为局部组件
  import TodoItem from './components/TodoItem'


//input的内容和逻辑做双向绑定
//在脚手架工具里面，data的写法由对象变成一个函数,函数的返回值为对应的数据
export default {
    //局部组件使用前先进行声明,可以写成一个对象,把一个局部组件注册到这个组件中，就可以在<ul><ul/>中使用了
    components:{
      'todo-item':TodoItem
    },
   // data : function () {
  //ES6的简化写法
      data(){
        return{
          inputValue:'',
          list:[]
        }
   },
  methods:{
        handleSubmit(){
          this.list.push(this.inputValue)
          this.inputValue = ''
        },
        handleDelete (index){
          console.log("全局方法调用成功！");
          this.list.splice(index,1)
        }
  }

}
</script>

<!--样式部分-->
<style>
</style>
